<template>
    <div>
        <!-- 先布局，再对接口 -->

        <div>
            <div>8月24日</div>
            <el-row :gutter="20">
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
                <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
            </el-row>
        </div>
    
        <div>
            <div>截至：{{endTime}}</div>
            <el-row :gutter="20">
                <el-col :span="8" v-for="item in listData" :key='item.id'>
                    <div style="color:#ff6900;font-weight:700" class="grid-content bg-purple">{{item.num}}</div>
                    <div class="grid-content bg-purple">{{item.name}}</div>
                </el-col>
            </el-row>
        </div>

        <div class='table'>
            <div>国内疫情</div>
            <el-row>
                <el-col :span="4"><div class="grid-content bg-purple">地区</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light">新增确诊</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">新增疑似</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light">新增死亡</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple">新增治愈</div></el-col>
                <el-col :span="4"><div class="grid-content bg-purple-light">境外输入</div></el-col>
            </el-row>
            <el-row class="bottom_div" v-for='item in tableData' :key='item.id'>
                <el-col :span="4">
                    <div class="grid-content">{{item.province}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.confirmed}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.suspected}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.dead}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.cure}}</div>
                </el-col>
                <el-col :span="4">
                    <div class="grid-content">{{item.outside}}</div>
                </el-col>
            </el-row>
        </div>

        <div>
            <div>最新进展</div>
            <div style="background-color:#f8f8f8;padding:20px 10px;" v-for="item in latest_news" :key="item.id" @click='showDetail(item)'>
                <div class="circle"></div>
                <div class="tag">最新</div>
                <div class="time">{{item.publishTime | dateFMT}}</div>
                <div class='content'>{{item.title}}</div>
            </div>
            
        </div>

        <!-- 详情的模态框 -->
        <el-dialog title="新闻资讯" :visible.sync="dialogTableVisible">
            <!-- v-html可以将变量中的标签解析出来 -->
            <div v-html='dialogData.content'></div>
        </el-dialog>

    </div>
</template>

<script>
import axios from '@/http/axios'
import moment from 'moment'
export default {
    data(){
        return {
            dialogTableVisible:false,
            params:{
                page:1,
                pageSize:10000
            },
            // 列表数据
            listData:[],
            endTime:'',
            // 表格数据
            tableData:[],
            // 最新新闻
            latest_news:[],
            dialogData:{}
        }
    },
    // 过滤器 处理时间格式
    filters:{
        dateFMT(str){
            return moment(str).format('YYYY 年 MM 月 DD 日')
        }
    },
    created(){
        this.queryAll()
        this.queryNews()
    },
    methods:{
        // 显示新闻详情
        showDetail(item){
            // 将当前行数据赋值给模态框的数据
            this.dialogData = item;
            // 显示模态框
            this.dialogTableVisible = true
        },
        // 查询最新新闻动态
        queryNews(){
            let obj = {
                page:1,
                pageSize:1000,
                categoryId:3
            }
            axios({
                url:'http://121.199.29.84:8001/article/pageQuery',
                method: 'GET',
                params:obj
            }).then((res)=>{
                this.latest_news = res.data.data.list
            })
        },
        queryAll(){
            axios({
                url:'http://121.199.29.84:8001/epidemic/pageQuery',
                method:'get',
                params:this.params
            }).then((res)=>{
                // 封装表格数据
                this.tableData = res.data.data.list
                // 封装截至时间
                this.endTime = moment(res.data.data.list[0].inputTime).format('YYYY 年 MM 月 DD 日 HH 时 mm 分 ss 秒')
                // 封装显示的数据
                var confirmed_total = 0;
                var dead_total = 0;
                var suspected_total = 0;
                var cure_total = 0;
                var serve_total = 0;
                var outside_total = 0;
                res.data.data.list.forEach((item)=>{
                    confirmed_total += item.confirmed
                    dead_total += item.dead
                    suspected_total += item.suspected
                    cure_total += item.cure
                    serve_total += item.serve
                    outside_total += item.outside
                })
                var obj1 = {
                    id:1,
                    name:'现有确诊',
                    num:confirmed_total
                }
                var obj2 = {
                    id:2,
                    name:'现有重症',
                    num:suspected_total
                }
                var obj3 = {
                    id:3,
                    name:'累计出院',
                    num:cure_total
                }
                var obj4 = {
                    id:4,
                    name:'累计境外输入',
                    num:outside_total
                }
                var obj5 = {
                    id:5,
                    name:'累计存活',
                    num:serve_total
                }
                var obj6 = {
                    id:6,
                    name:'累计死亡',
                    num:dead_total
                }
                this.listData.push(obj1,obj2,obj3,obj4,obj5,obj6)
            })
        }
    }
}
</script>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .circle {
      height: 10px;
      width:10px;
      border-radius:50%;
      background-color:blue;
  }
  .tag {
      background-color:red;
      font-size:14px;
      color: white;
      padding:4px;
      border-radius:5px;
  }
  .time {
      font-weight:600;
  }
  .circle , .tag , .time {
      display:inline-block;
      margin-right:10px;
  }
  .content {
      margin-top:10px;
      background-color:white;
      padding:10px;
      border-radius: 5px;
  }
  .bottom_div div {
      border-bottom:1px solid #ededed;
  }
  .table .el-row {
      margin-bottom:0;
  }
  .table .el-col {
      margin-bottom:0;
  }
  .el-col {
    border-radius: 4px;
    margin-bottom: 10px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    /* border-radius: 4px; */
    min-height: 36px;
    line-height:36px;
    text-align: center;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>